<template>
    <div class="addUserAuth-container">
        <b-container class="bv-example-row row-box">
            <!-- 用户实名认证表单区域 -->
            <b-row align-h="center" class="my-userAuthInfo">
                <b-col cols="12" sm="12" md="6" lg="6">
                    <div class="userAuthInfo">
                        <div class="userAuth-title">
                            <h4>在发布商品前，您还需要实名认证哦</h4>
                        </div>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate"
                        :label-width="90">
                            <FormItem label="支付宝号" prop="uaAlipay">
                                <Input v-model="formValidate.uaAlipay" placeholder="请输入支付宝账号" />
                            </FormItem>
                            <FormItem label="身份证图片" prop="file">
                              <div class="upload-file">
                                <form enctype="multipart/form-data">
                                    <ImgCutter class="my-file"
                                        :boxWidth="600"
                                        :boxHeight="400"
                                        :cutWidth="350"
                                        :cutHeight="250"
                                        :sizeChange="false"
                                        v-on:cutDown="cutDown">
                                        <button slot="open"><Icon type="ios-cloud-upload"/> 请上传身份证正面图</button>
                                    </ImgCutter>
                                </form>
                              </div>
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="handleSubmit('formValidate')">保存</Button>
                                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
                            </FormItem>
                        </Form>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>

// eslint-disable-next-line import/no-extraneous-dependencies
import ImgCutter from 'vue-img-cutter'
const formData = new FormData()
export default {
  name: 'addUserAuth',
  data () {
    return {
      formValidate: {
        uaAlipay: ''
      },
      ruleValidate: {
        uaAlipay: [
          { required: true, message: '支付宝账号不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 新增身份认证
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          formData.append('uaUid', JSON.parse(localStorage.getItem('user')).uId)
          formData.append('uaAlipay', this.formValidate.uaAlipay)
          console.log(formData)
          this.$axios({
            url: 'userAuth/save',
            method: 'post',
            contentType: false,
            data: formData,
            processData: false,
            headers: {
              Authorization: localStorage.getItem('token')
            }
          }).then(res => {
            if (res.data.code === 200) {
              this.$axios({
                url: 'users/findById/' + JSON.parse(localStorage.getItem('user')).uId,
                method: 'get',
                headers: {
                  Authorization: localStorage.getItem('token')
                }
              }).then(resu => {
                if (res.data.code === 200) {
                  localStorage.setItem('user', JSON.stringify(resu.data.object))
                  this.$router.push({ path: '/userHome' })
                }
              })
            }
          })
            .catch(error => {
              console.log(error)
            })
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    cutDown (res) {
      let file = res.file // 输出为file类型的文件对象
      formData.append('file', file)
      if (file !== null) {
        this.$Message.success('上传图片成功!')
      }
    }
  },
  components: {
    ImgCutter
  }
}

</script>
<style scoped>
.row-box{
    background: #fff;
    padding: 30px;
    margin-bottom: 30px;
    min-height: 520px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.my-file {
    width: 100%;
    height: 32px;
}
.my-file button {
    position: absolute;
    width: 176px;
    height: 32px;
    top: 0px;
    right: 0px;
    cursor: pointer;
    border: none;
    font-size: 12px;
    line-height: 32px;
    text-align: center;
    background: #fff;
    border-radius: 5px;
    border:1px solid #c9c9c9;
    color:#999;
}
.upload-file {
    width: 176px;
    height: 32px;
    position: relative;
    display: inline-block;
    border-radius: 4px;
    font-size: 12px;
    text-align: center;
    line-height: 32px;
    margin: 0 0 auto auto;
}
.userAuth-title {
    text-align: center;
    margin-bottom: 50px;
}
</style>
